<!--
 * @Author: 李兵 964368540@qq.com
 * @Date: 2024-05-25 10:11:23
 * @LastEditors: libing 964368540@qq.com
 * @LastEditTime: 2024-06-05 22:45:10
 * @FilePath: \crm\pages\form\follow-form.vue
 * @Description: 新增跟进 form
-->
<template>
  <view class="form-wrap">
    <uni-forms
      ref="baseForm"
      :modelValue="formData"
      :rules="rules"
      label-position="left"
      label-width="120px"
    >
      <view class="forms-item-wrap">
        <uni-forms-item label="联系人" name="customName" :required="true">
          <input
            type="text"
            trim="all"
            v-model="formData.customName"
            placeholder="请输入联系人"
            :inputBorder="false"
            placeholder-class="placeholder_class"
          />
        </uni-forms-item>
        <uni-forms-item label="跟进方式" name="followMethod" :required="true">
          <SelectPicker :range="FOLLOW_TYPE_ARRAY" v-model="formData.followMethod">
            <view
              :class="[
                formData.followMethod ? 'uni-input-input' : 'select-wrap',
              ]"
              >{{
                formData.followMethod
                  ? FOLLOW_TYPE_MAP[formData.followMethod]
                  : "请选择跟进方式"
              }}</view
            >
          </SelectPicker>
        </uni-forms-item>
        <uni-forms-item label="下次更进时间" name="nextTime" :required="true">
          <uni-datetime-picker
            type="datetime"
            :clear-icon="false"
            v-model="formData.nextTime"
            placeholder="请选择下次更进时间"
            :border="false"
			      placeholder-class="placeholder_class"
          >
		   <view
		     :class="[
		       formData.nextTime ? 'uni-input-input' : 'select-wrap',
		     ]"
		     >{{
		       formData.nextTime
		         ? formData.nextTime
		         : "请选择下次更进时间"
		     }}</view
		   >
		  </uni-datetime-picker>
        </uni-forms-item>
        <view class="forms-item-wrap">
        <uni-forms-item label="备注" name="remarks" :required="true">
          <textarea
            type="textarea"
            trim="all"
            v-model="formData.remarks"
            placeholder="请输入备注"
             placeholder-class="placeholder_class"
          />
        </uni-forms-item>
        </view>
      </view>
    </uni-forms>
    <bottombox>
      <u-button
        type="error"
        text="保存"
        @click="onSumbit"
        :loading="loading"
        :disabled="loading"
      ></u-button>
    </bottombox>
  </view>
</template>
<script>
import { addCompanyFollow } from "@/apis/customer/index";
import {
  FOLLOW_TYPE_ARRAY,
  FOLLOW_TYPE_MAP
} from "@/contacts/calendar";
import SelectPicker from "@/components/select-picker/select-picker";
export default {
  name: "follow-form",
  components: {
    SelectPicker,
  },
  onLoad(data) {
    this.customId = data.id
  },
  data() {
    return {
      FOLLOW_TYPE_ARRAY,
      FOLLOW_TYPE_MAP,
      customId: "",
      loading: false,
      formData: {
        remarks: null,
        customName: null,
        followMethod: null,
        nextTime: null,
      },
      rules: {
        remarks: {
          rules: [
            {
              required: true,
              errorMessage: "请输入备注",
            },
          ],
        },
        customName: {
          rules: [
            {
              required: true,
              errorMessage: "请输入联系人",
            },
          ],
        },
        followMethod: {
          rules: [
            {
              required: true,
              errorMessage: "请选择更进方式",
            },
          ],
        },
        nextTime: {
          rules: [
            {
              required: true,
              errorMessage: "请选择下次更进时间",
            },
          ],
        },
      },
    };
  },
  methods: {
    async onSumbit() {
      const valid = await this.$refs.baseForm.validate();
      if (valid) {
        try {
          this.loading = true;
          const body = {
            customId: this.customId,
            ...this.formData,
            id: 0,
          };
          await addCompanyFollow(body);
          this.loading = false;
          uni.navigateBack({
            delta: 1, // 返回的页面数
          });
        } catch (error) {
          this.loading = false;
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
page {
  background: #f2f4f5;
}
</style>
